<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>Demo</title>

    <!--
    Feature detect Custom Elements support. If the browser DOES support Custom
    Elements then we need to load the custom-elements-es5-adapter because
    our project code has been transpiled from ES2015 to ES5 and native Custom
    Elements expect elements will be registered as classes.
    -->
    <script>if (!window.customElements) { document.write('<!--'); }</script>
    <script src="./modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
    <!--! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

    <custom-style>
        <style is="custom-style" include="demo-pages-shared-styles">
            #vector {
                --or-map-marker-width: 80px;
                --or-map-marker-height: 80px;
                --or-map-marker-transform: translate(-40px, -75px);
                --or-map-marker-fill: blue;
                --or-map-marker-icon-width: 38px;
                --or-map-marker-icon-height: 38px;
                --or-map-marker-icon-transform: translate(-50%, -31px);
                --or-map-marker-icon-fill: red;
            }
        </style>
    </custom-style>
</head>
<body>
<div class="vertical-section-container centered">
    <h3>Demo</h3>
    <demo-snippet>
        <template>
            <or-map type="RASTER" center="4.470175, 51.923464" style="height: 500px; width: 100%;">
                <or-map-marker lat="51.923464" lng="4.470175" class="marker" icon="or:logo-plain"></or-map-marker>
            </or-map>
            <or-map id="vector" center="4.470175, 51.923464" style="height: 500px; width: 100%;">
                <or-map-marker id="demo-marker" lat="51.923464" lng="4.470175" class="marker" icon="or:logo-plain"></or-map-marker>
            </or-map>
        </template>
    </demo-snippet>
</div>

<!--
Use the webcomponents-loader script which will feature detect which Web
Components features are missing and lazy load the appropriate polyfills.
When we hear the 'WebComponentsReady' event from the polyfill bundle we can
insert our 'bundle.js'.
-->
<script>
    (function () {
        document.addEventListener('WebComponentsReady', function componentsReady() {
            document.removeEventListener('WebComponentsReady', componentsReady, false);
            var script = document.createElement('script');
            script.src = '<%= htmlWebpackPlugin.files.js[0] %>';
            var refScript = document.getElementsByTagName('script')[0];
            refScript.parentNode.insertBefore(script, refScript);
        }, false);
    })();
</script>
<script src="modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<button onclick="document.getElementById('demo-marker').lat = document.getElementById('demo-marker').lat + 0.001;">Move Marker Up</button>
<button onclick="document.getElementById('demo-marker').lat = document.getElementById('demo-marker').lat - 0.001;">Move Marker Down</button>
</body>
</html>
